<!DOCTYPE html>
<html>
    
    <head>
        <title>Chat</title>
        <script src="jquery-2.1.1.min.js"></script>
    	<style>
    		#main {
    			position: relative;
    			width: 700px;
    			border: 1px solid silver;
    			margin: 0 auto;
    			padding: 10px 10px 10px 10px;
    		}		
    	</style>
    </head>
    <body>
    	<div id="main">
	        <h3>Welcome.</h3>
	        <hr />
	        <div id="screen1">
	        	<small>What is your name?</small>
	        	<input type="text" id="txtName" placeholder="What is your name?" style="width:200px" />
	        	&nbsp;
	        	<button id="btnSignIn">SingIn</button>
	        </div>
	        <div id="screen2" style="display:none">
	        	<span id="youName">Your name is : </span>
	        	<hr />
	        	<small>Input messages:</small>
	        	<textarea id="txtMessage" rows="10" cols="40"></textarea>
	        	<button id="btnSendMessage">Send</button>	
	        </div>
        </div>
	        <script type="text/javascript" src="script.js"></script>
    </body>
</html>